小程序字体图标定制：iconfont 配置与使用
在小程序开发中，字体图标（iconfont）是替代图片图标的最佳方案。字体图标体积小、可自定义颜色和大小、支持 CSS 样式控制。本节介绍如何从阿里巴巴 iconfont 平台创建图标项目、批量去色、下载资源并集成到 uni-app 项目中。
iconfont 平台基础
iconfont（iconfont.cn）是阿里巴巴推出的矢量图标管理平台，提供以下功能：
- 图标搜索与下载
- 图标项目管理（按项目组织图标）
- 在线生成字体文件
- 支持 SVG、PNG、字体三种格式
搜索技巧
- 使用英文关键词搜索（如 "play"、"book"），命中率高
- 优先选择单色图标，后续可通过 CSS 自定义颜色
- 多色图标虽然好看，但不利于动态修改颜色
创建图标项目
步骤
- 登录 iconfont.cn
- 点击顶部"资源管理" → "我的项目"
- 点击"新建项目"
- 配置项目信息：
| 配置项 | 建议值 | 说明 |
|---|---|---|
| 项目名称 | uni-starter | 自定义名称 |
| FontClass 前缀 | i- | 与 UnoCSS 图标前缀保持一致 |
| 字体格式 | 默认 | 保持默认即可 |
- 搜索需要的图标 → 添加到购物车 → 添加到项目
批量去色
添加图标后，务必批量去色：
- 点击"批量操作"
- 全选所有图标
- 点击"批量去色"
去色后的图标变成纯黑色，可以通过 CSS 的 color 属性自由设置颜色。如果不去色，字体文件中会嵌入固定颜色，无法通过 CSS 修改。
下载与集成
方式一：网络链接（CDN）
点击项目"更新代码" → 生成在线链接 → 直接在 HTML 中通过 <link> 引入。这种方式适合 Web 项目，但小程序不支持外部 CSS 链接。
方式二：本地资源文件（推荐）
- 点击"下载至本地"，获取 ZIP 压缩包
- 解压后只需要以下文件：
iconfont/
├── iconfont.css # 必须：字体图标样式
├── iconfont.ttf # 必须：TrueType 字体
├── iconfont.woff # 必须：Web Open Font Format
└── iconfont.woff2 # 必须：WOFF2 压缩格式
text
- 在 uni-app 项目的
static目录下创建iconfont文件夹 - 将上述 4 个文件拷贝进去
引入样式
在 main.js（或 main.ts）顶部引入：
import './static/iconfont/iconfont.css'
javascript
使用字体图标
基本用法
<template>
<!-- 使用 class 名称 -->
<view class="iconfont icon-play-fill" style="font-size:36rpx;color:#333" />
</template>
vue
样式控制
<template>
<view
class="iconfont icon-play-fill"
style="font-size:72rpx; color: #8B5CF6;"
/>
</template>
vue
字体图标的所有样式都可以通过 CSS 控制：
| 样式属性 | 说明 | 示例 |
|---|---|---|
font-size | 图标大小 | font-size: 36rpx |
color | 图标颜色 | color: #8B5CF6 |
opacity | 透明度 | opacity: 0.8 |
transform | 旋转/缩放 | transform: rotate(90deg) |
class 命名规则
iconfont 生成的 class 格式为：iconfont icon-{图标名称}。其中：
iconfont— 基础类名（使用 font-family）icon-play-fill— 具体图标类名（对应 Unicode 编码）
可以在 iconfont 项目中自定义 FontClass 前缀（如 i-），使其与 UnoCSS 的图标前缀保持一致：
/* 自定义前缀后 */
.i-play-fill { ... }
css
iconfont 与 UnoCSS 图标对比
| 对比项 | iconfont | UnoCSS Icons |
|---|---|---|
| 图标来源 | 自选图标集 | @iconify 全集（15万+） |
| 自定义程度 | 可上传 SVG | 使用预设图标集 |
| 加载方式 | 字体文件（全量） | 按需生成 CSS |
| 适用场景 | 品牌定制图标 | 通用 UI 图标 |
| 颜色控制 | CSS color | CSS color |
建议：品牌特有图标使用 iconfont 定制，通用 UI 图标使用 UnoCSS Icons 的 @iconify 预设。
课程资源
老师已准备好 iconfont 资源文件，可在以下位置获取：
- 课程资料文件夹下载
- Git 仓库中
static/iconfont/目录
↑